<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/xiaomi.css" type="text/css">
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <!-- 设置上面的导航栏 -->
        <div>
            <div class="nav">
                <div class="nav_header">
                    <!-- 上面导航栏 -->
                    <div class="nav_header_1">
                        <div class="nav_header_top">
                            <div class="nav_header_top1">
                                <ul>
                                    <li>
                                        <a href="#">小米商城</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">MIUI</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">loT</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">云服务</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">天星数科</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">有品</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">小爱开放平台</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">企业团购</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">资质证照</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">协议规则</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">下载app</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">智能生活</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">Select Location</a>
                                        <span>|</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="nav_header_top3">
                                <a href="#">
                                    <img src="image/d7db56d1d850113f016c95e289e36efa.png" alt="">
                                    <div>购物车</div>
                                    <span>(0)</span>
                                </a>

                            </div>
                            <div class="nav_header_top2">
                                <ul>
                                    <li>
                                        <a href="#">登录</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">注册</a>
                                        <span>|</span>
                                    </li>
                                    <li>
                                        <a href="#">消息通知</a>
                                        <span>|</span>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <!-- 下面的导航栏 -->
                    <div class="nav_header_2">
                        <div class="nav_header_totle">
                            <div class="totle_loge">
                                <div class="totle_loge1">
                                    <div>
                                        <a href="#"><img src="image/placeholder-40.png" alt=""></a>
                                    </div>
                                </div>
                            </div>
                            <div class="totle_nav">
                                <div class="totle_nav1">
                                    <ul>
                                        <li><a href="#">小米手机</a></li>
                                        <li><a href="#">Redmi红米</a></li>
                                        <li><a href="#">电视</a></li>
                                        <li><a href="#">笔记本</a></li>
                                        <li><a href="#">平板</a></li>
                                        <li><a href="#">家电</a></li>
                                        <li><a href="#">路由器</a></li>
                                        <li><a href="#">智能硬件</a></li>
                                        <li><a href="#">服务</a></li>
                                        <li><a href="#">社区</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="totle_search">
                                <div class="search">
                                    <form action="#" method="GET">
                                        <button>
                                            <img src="image/148380710493971477.png" alt="">
                                        </button>
                                        <input type="search" placeholder="小米手机" id="search">
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 轮播图 -->
                    <div class="nav_header_3">
                        <div class="header_3">
                            <div>
                                <img src="image/bd166252b080dcab7b5f5382a921171a.jpg" alt="">
                                <div class="header_left">
                                    <div>
                                        <ul>
                                            <li>
                                                <div>
                                                    <a href="#">手机 <span>></span> </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">电视 <span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">笔记本 平板 <span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">家电 <span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">出行 穿戴 <span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">智能 路由器<span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">电源 配件<span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">健康 儿童<span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">耳机 音箱<span>></span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <a href="#">生活 箱包<span>></span></a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="header_center">
                                    <div class="center_right">
                                        <div>&lt</div>
                                    </div>
                                    <div class="center_left">
                                        <div>&gt</div>
                                    </div>
                                </div>

                            </div>
                            <!-- 轮播图下的图片栏 -->
                            <div class="nav_middle">
                                <div class="middle_l">
                                    <div class="middle_l1">
                                        <ul>
                                            <li>
                                                <img src="image/82abdba456e8caaea5848a0cddce03db.png" alt="">
                                                <a href="#">保障服务</a>
                                            </li>
                                            <li>
                                                <img src="image/微信图片_20210815120736.png" alt="">
                                                <a href="#">企业团购</a>
                                            </li>
                                            <li>
                                                <img src="image/eded6fa3b897a058163e2485532c4f10.png" alt="">
                                                <a href="#">F码通道</a>
                                            </li>
                                            <li>
                                                <img src="image/82abdba456e8caaea5848a0cddce03db.png" alt="">
                                                <a href="#">米粉卡</a>
                                            </li>
                                            <li>
                                                <img src="image/f4846bca6010a0deb9f85464409862af.png" alt="">
                                                <a href="#">以旧换新</a>
                                            </li>
                                            <li>
                                                <img src="image/9a76d7636b08e0988efb4fc384ae497b.png" alt="">
                                                <a href="#">话费充值</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="middle_l2">
                                        <ul>
                                            <li>
                                                <a href="#"><img src="image/5d4298059889417157e8492750328492.jpg"></a>
                                            </li>
                                            <li>
                                                <a href="#"><img src="image/b30177d629bfbe2fb42251c1b8538f7b.jpg"></a>
                                            </li>
                                            <li>
                                                <a href="#"><img src="image/268aadece1368da98fcf5553b657cdb3.jpg"></a>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 屏幕中的固定定位 -->
        <div class="header_right">
            <div>
                <ul>
                    <li><a href="#">手机APP</a></li>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">人工服务</a></li>
                    <li><a href="#">购物车</a></li>

                </ul>
            </div>
        </div>

    </header>
    <!-- 中间内容 -->
    <section>
        <!-- 商品栏 -->
        <div class="content">
            <!-- 设置商品栏的引导图 -->
            <div class="content_top">
                <a href="#"><img src="image/88e35cffc82cd98cd53172460067af17.jpg" alt=""></a>
            </div>
            <!-- 设置手机商品栏 -->
            <div class="content_centent">
                <div>
                    <div class="content_centent1">
                        <div class="content_centent11">手机</div>
                        <div class="content_centent12">
                            <a href="#">查看更多<span>&gt</span></a>
                        </div>
                    </div>
                    <div class="content_centent2">
                        <div class="content_centent20">
                            <div class="content_centent21">
                                <img src="image/c583f2edc613f1be20fa415910b13ce3.jpg" alt="">
                            </div>
                            <div class="content_centent22">
                                <ul>
                                    <li>
                                        <a href="#"><img src="image/8909080ddb0851af0b87530e2927844f.jpg" alt="">
                                            <div>
                                                Xiaomi MIX 4
                                            </div>
                                            <div>
                                                CPU全面屏
                                            </div>
                                            <div>
                                                4999元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/61454401f855cf5ed64747a6ac04bae5.jpg" alt="">
                                            <div>
                                                Redmi Note 10 Pro
                                            </div>
                                            <div>
                                                天玑1100年度旗舰芯
                                            </div>
                                            <div>
                                                1599元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/ab07e0fcbec3beb8b0f409db8bee8da4.jpg" alt="">
                                            <div>
                                                Redmi Note 10 5G
                                            </div>
                                            <div>
                                                5G小金刚|旗舰长续航
                                            </div>
                                            <div>
                                                1099元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/5dc32ec73299ff79556dcd1cf0f0ac11.png" alt="">
                                            <div>
                                                小米MIX FOLD
                                            </div>
                                            <div>
                                                折叠大屏 | 自研芯片
                                            </div>
                                            <div>
                                                9999元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/584add2c9cfdb9eefe7b642bf191773a.png" alt="">
                                            <div>
                                                小米11 Ultra
                                            </div>
                                            <div>
                                                1、1.12"GN | 2k四微曲屏
                                            </div>
                                            <div>
                                                5499元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/34caee2c867bfd8c5e0dc2d8c663e121.jpg" alt="">
                                            <div>
                                                小米 11Pro
                                            </div>
                                            <div>
                                                1/1.12"NG | 骁龙888
                                            </div>
                                            <div>
                                                44499元起
                                            </div>

                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/d07671f25a2b3a6c3d4fac189f28fbe9.png" alt="">
                                            <div>
                                                小米11 青春版
                                            </div>
                                            <div>
                                                小米11 青春版 轻薄
                                            </div>
                                            <div>
                                                2099元起
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="image/3b7fbb6fe07907c60f08358adab5adfe.png" alt="">
                                            <div>
                                                K40 游戏增强版
                                            </div>
                                            <div>
                                                轻薄电竞设计
                                            </div>
                                            <div>
                                                1999元起
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--  设置家电商品栏 -->
            <div class="content_cent">
                <div>
                    <div class="content_cent1">
                        <div class="content_cent11">家电</div>
                        <div class="content_cent12">
                            <a href="#"><span>热门</span><span>电视音影</span></a>
                        </div>
                    </div>
                    <div class="content_cent2">

                        <div class="content_cent22">
                            <ul>
                                <li>
                                    <a href="#"><img src="image/da9d09f961ec1c9ead8c907a5d700a29.jpeg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/4f44496b62bac0206fb8bdbeae9d4a28.png" alt="">
                                        <h1>
                                            小米电视665” OLED
                                        </h1>
                                        <div>
                                            CPU全面屏
                                        </div>
                                        <div>
                                            4999元起
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/0a1ae5341d2dae66cd42566c60d2d666.png" alt="">
                                        <h1>
                                            Xiaomi MIX 4
                                        </h1>
                                        <div>
                                            CPU全面屏
                                        </div>
                                        <div>
                                            4999元起
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/0112cb7e2ea8489fbd36ce3a781d5232.jpg" alt="">
                                        <h1>
                                            Redmi Note 10 Pro
                                        </h1>
                                        <div>
                                            天玑1100年度旗舰芯
                                        </div>
                                        <div>
                                            1599元起
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/6bed167fc905bab57dee478bcf1e5e0d.JPG" alt="">
                                        <h1>
                                            Redmi Note 10 5G
                                        </h1>
                                        <div>
                                            5G小金刚|旗舰长续航
                                        </div>
                                        <div>
                                            1099元起
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/7cc7ff4226dcfd11623d47a4c447907d.jpeg" alt="">

                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/65df9e92c06dcd148de5f0eb13e16ea2.png" />
                                        <h1>
                                            小米11 Ultra
                                        </h1>
                                        <div>
                                            1、1.12"GN | 2k四微曲屏
                                        </div>
                                        <div>
                                            5499元起
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/314df4955a5f305de306155078bb103d.jpg" alt="">
                                        <h1>
                                            小米 11Pro
                                        </h1>
                                        <div>
                                            1/1.12"NG | 骁龙888
                                        </div>
                                        <div>
                                            44499元起
                                        </div>

                                    </a>
                                </li>
                                <li>
                                    <a href="#"><img src="image/b8c63a2024528fe5410ebe669b7d2407.jpg" alt="">
                                        <h1>
                                            小米11 青春版
                                        </h1>
                                        <div>
                                            小米11 青春版 轻薄
                                        </div>
                                        <div>
                                            2099元起
                                        </div>
                                    </a>
                                </li>
                                <li class="content_cent23">
                                    <ul>
                                        <li>
                                            <a href="">
                                                <div>
                                                    <h3>米家互联网烟灶套装（天然气）</h3>
                                                    <p>1799元</p>
                                                </div>
                                                <img src="image/7e5f89adf98ab3fccb34012b5209cd58.jpg" alt="">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="">
                                                <div>
                                                    <h3> 浏览更多</h3>
                                                    <h6>热门</h6>
                                                </div>
                                                <img class="ii1" src="image/微信图片_20210817202732.png" alt="">
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                            </ul>
                        </div>

                    </div>
                </div>

            </div>
            <!-- 设置商品栏的结束图 -->
            <div class="content_top">
                <a href="#"><img src="image/88e35cffc82cd98cd53172460067af17.jpg" alt=""></a>
            </div>
            <!-- 设置视频区域 -->
            <div class="content_centent">
                <div>
                    <div class="content_centent1">
                        <div class="content_centent11">视频</div>
                        <div class="content_centent12">
                            <a href="#">查看更多<span>&gt</span></a>
                        </div>
                    </div>
                    <div class="content_centent5">

                        <ul>
                            <li>
                                <a href="#">
                                    <img src="image/e74c4ff741bcdfc5b28a48a43e4edc6d.webp" alt="">
                                    <h1>2021年春季发布会第一场</h1>
                                    <span><i><div></div></i></span>
                                </a>

                            </li>
                            <li>
                                <a href="#">
                                    <img src="image/101b19aca4bb489bcef0f503e44ec866.webp" alt="">
                                    <h1>Redmi 10X系列发布会</h1>
                                    <p>Redmi 10X系列发布会</p>
                                    <span><i><div></div></i></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="image/96563e75833ba4563bd469dd28203b09.webp" alt="">
                                    <h1>小米10 青春版 发布会</h1>
                                    <span><i><div></div></i></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="image/2fd26bb99b723337a2f8eaba84f7d5bb.webp" alt="">
                                    <h1>小米10 8K手机拍大片</h1>
                                    <span><i><div></div></i></span>
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- 脚部栏 -->
    <footer>
        <div class="foot">
            <!-- 脚部顶栏 -->
            <div class="foot_total">
                <div class="foot_total1">
                    <ul>
                        <li><a href="#">预约维修服务</a><span>|</span></li>
                        <li><a href="#">7天无理由退货</a><span>|</span></li>
                        <li><a href="#">十五天免费换货</a><span>|</span></li>
                        <li><a href="#">满69包邮</a><span>|</span></li>
                        <li><a href="#">520余家售后网点</a></li>
                    </ul>
                </div>
                <div class="foot_total2">
                    <div>

                        <div class="foot_total23">
                            <div>
                                <ul>
                                    <li>
                                        帮助中心
                                    </li>
                                    <li><a href="#">账户管理</a></li>
                                    <li><a href="#">购物指南</a></li>
                                    <li><a href="#">订单操作</a></li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        服务支持
                                    </li>

                                    <li>
                                        <a href="#">售后政策</a>
                                    </li>
                                    <li>
                                        <a href="#">自主服务</a>
                                    </li>
                                    <li>
                                        <a href="#">相关下载</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        线下门店
                                    </li>
                                    <li>
                                        <a href="#">小米之家</a>
                                    </li>
                                    <li>
                                        <a href="#">服务网点</a>
                                    </li>
                                    <li>
                                        <a href="#">授权体验店</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        关于小米
                                    </li>
                                    <li>
                                        <a href="#">了解小米</a>
                                    </li>
                                    <li>
                                        <a href="#">加入小米</a>
                                    </li>
                                    <li>
                                        <a href="#">投资者关系</a>
                                    </li>
                                    <li>
                                        <a href="#">企业社会责任</a>
                                    </li>
                                    <li>
                                        <a href="#">廉洁举报</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul>

                                    <li>
                                        关注我们
                                    </li>
                                    <li>
                                        <a href="#">新浪微博</a>
                                    </li>
                                    <li>
                                        <a href="#">官方微信</a>
                                    </li>
                                    <li>
                                        <a href="#">联系我们</a>
                                    </li>
                                    <li>
                                        <a href="#">公益基金</a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>
                                        特色服务
                                    </li>
                                    <li>
                                        <a href="#">F码通道</a>
                                    </li>
                                    <li>
                                        <a href="#">礼物码</a>
                                    </li>
                                    <li>
                                        <a href="#">防伪查询</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="foot_total24">
                        <p>400-100-5678</p>
                        <p>8:00-18:00(仅收市话费)</p>
                        <a href="#"><img src="" />人工客服</a>
                        <div>
                            <span>关注小米:</span>
                            <a href="#"><img src="image/微信图片_20210815202816.png" alt=""></a>
                            <a href="#"><img src="image/微信图片_20210815202738.png" alt=""></a>
                        </div>
                    </div>
                </div>


            </div>
            <!-- 脚部下面内容 -->
            <div class="foot_bottom">
                <div class="foot_bottom1">
                    <div class="foot_bottom1_left">
                        <div>
                            <img src="image/微信图片_20210815223003.png" alt="">
                        </div>
                    </div>
                    <div class="foot_bottom1_right">
                        <div class="foot_bottom1_right1">
                            <ul>
                                <li><a href=" # ">小米商城</a></li>
                                <li><a href="# ">MIUI </a></li>
                                <li><a href="# ">米家</a></li>
                                <li><a href="# ">米聊</a></li>
                                <li><a href="# ">多看</a></li>
                                <li><a href="# ">游戏</a></li>
                                <li><a href="# ">政企服务</a></li>
                                <li><a href="# ">小米天猫店</a></li>
                                <li><a href="# ">小米集团隐私政策</a></li>
                                <li><a href="# ">小米公司儿童信息保护政策</a></li>
                                <li><a href="# ">小米隐私政策</a></li>
                                <li><a href="# ">小米商场用户协议</a></li>
                                <li><a href="# ">问题反馈</a></li>
                                <li><a href="# ">Select Location</a></li>
                            </ul>
                        </div>
                        <div class="foot_bottom1_right2">
                            <ul>
                                <li><a href="#">北京互联网法院法律服务工作站</a><span>|</span></li>
                                <li><a href="#">中国消费协会</a><span>|</span></li>
                                <li><a href="#">北京市消费协会</a><span>|</span></li>
                            </ul>
                        </div>
                        <div class="foot_bottom1_right3">
                            <ul>
                                <li>© mi.com 京ICP证110507号 </li>
                                <li><a href="#">京ICP备10046444号 </a></li>
                                <li><a href="#">京公网安备11010802020134号 </a></li>
                                <li><a href="#">京网文[2020]0276-042号</a></li>
                            </ul>
                        </div>
                        <div class="foot_bottom1_right4">
                            <ul>
                                <li><a href=" # ">（京）网械平台备字（2018）第00005号</a></li>
                                <li><a href="# ">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a></li>
                                <li>
                                    <a href="# "></a>营业执照</li>
                                <li><a href="# ">医疗器械质量公告</a></li>
                            </ul>
                        </div>
                        <div class="foot_bottom1_right5">
                            <ul>
                                <li>
                                    <a href="">增值电信业务许可证</a>
                                </li>
                                <li> 网络食品经营备案</li>
                                <li>京食药网食备202010048</li>
                                <li>食品经营许可证</li>
                            </ul>
                        </div>
                        <div class="foot_bottom1_right6">
                            <ul>
                                <li>违法和不良信息举报电话：171-5104-4404 </li>
                                <li>
                                    <a href=" # ">知识产权侵权投诉</a>
                                </li>
                                <li></li>
                            </ul>
                        </div>

                    </div>
                    <div class="foot_bottom1_b ">
                        <ul>
                            <li>
                                <a href="#"><img src="image/truste.png" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="image/v-logo-2.png" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="image/icon3.png" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="image/ba10428a4f9495ac310fd0b5e0cf8370.png" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="image/f1ee261b96ae71e845efba398efeca02.png" alt=""></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>